{extend name="common/layout" /}
{block name="main"}
<t-card class="list-card-container" :bordered="false">
  <div style=" display: flex;align-items: center;margin-bottom: 10px;">
    <t-button theme="primary" style="margin-right: 10px;" @click="handleAdd" :disabled="buttonDisabled">
      <template #icon><t-icon name="add" /></template>
      新建
    </t-button>
    <t-select placeholder="请选择类型" clearable @change="changeType" style="width: 150px;">
      <t-option v-for="(item, index) in typeArr" :key="index" :value="item.value" :label="item.label">
        {{ item.label }}
      </t-option>
    </t-select>
  </div>
  <t-table :data="tableData" :columns="columns" row-key="id" vertical-align="top" :bordered="true" size="small"
    active-row-type="single" :hover="true" :loading="tableLoading" :pagination="pagination">
    <template #op="slotProps">
      <t-space>
        <t-button v-if="slotProps.row.accout_mark=='N'" size="small" @click="handleEdit(slotProps.row)">修改</t-button>
        <t-popconfirm v-if="slotProps.row.accout_mark=='N'" theme="warning" content="确认到账?"
          @confirm="handleAccount(slotProps.row)">
          <t-button theme="warning" size="small">到账</t-button>
        </t-popconfirm>
        <t-popconfirm v-if="slotProps.row.accout_mark=='N'" theme="danger" content="确认删除?"
          @confirm="handleDelete(slotProps.row)">
          <t-button theme="danger" size="small">删除</t-button>
        </t-popconfirm>
      </t-space>
    </template>
  </t-table>
</t-card>

<!-- 新增FORM -->
<t-dialog v-model:visible="dialogVisible" :header="formHeader" :width="680" :footer="false">
  <t-form ref="otherForm" :data="formData" :rules="rules" :label-width="100" @submit="handleSave">
    <t-form-item label="类型" name="type">
      <t-radio-group v-model="formData.type">
        <t-radio value="D">维修费</t-radio>
        <t-radio value="E">工资</t-radio>
        <t-radio value="F">其他</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="金额" name="total_money">
      <t-input-number v-model="formData.total_money" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="日期" name="accounting_date">
      <t-date-picker v-model="formData.accounting_date" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item label="是否重复" name="circulate_mark">
      <t-radio-group v-model="formData.circulate_mark">
        <t-radio value="Y">是</t-radio>
        <t-radio value="N">否</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="备注" name="note">
      <t-textarea v-model="formData.note" :style="{ width: '480px' }" placeholder="请输入" autosize />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="dialogVisible = false" style="margin-right: 5px;">取消</t-button>
      <t-button theme="primary" type="submit">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    tableLoading: false,
    columns: [
      { title: '房产', colKey: 'property_name', width: 80, fixed: 'left', },
      { title: '类型', colKey: 'type_name', width: 80 },
      { title: '金额', colKey: 'total_money', width: 80 },
      { title: '到账日期', colKey: 'accounting_date', width: 80 },
      { title: '操作', colKey: 'op', width: 160, fixed: 'right', },
    ],
    // 分页
    pagination: {
      defaultPageSize: 10,
      total: 10,
      defaultCurrent: 1,
    },
    dialogVisible: false,
    formData: {},
    formHeader: '',
    rules: {
      total_money: [
        { required: true, message: '必填', trigger: 'blur' },
        { min: 0, message: '金额不能负数', type: 'error', trigger: 'blur' },
      ],
      accounting_date: [{ required: true, message: '必填' }],
      circulate_mark: [{ required: true, message: '必填' }],
      type: [{ required: true, message: '必填' }],
    },
    type: '',
    typeArr: [
      { value: "D", label: "维修费" },
      { value: "E", label: "工资" },
      { value: "F", label: "其他" }
    ],
  };
  function f() {
    return {
      init: function () {
        this.queryTable();
      },
      queryTable: function () {
        this.tableLoading = true;
        axiosGet("{:url('queryOther')}", { 'type': this.type }).then(response => {
          if (response.code == 1) {
            this.tableData = response.data;
            this.pagination.total = response.count;
          } else {
            this.$message.error('系统出错了!!!');
          }
          this.tableLoading = false;
        });
      },
      handleAdd() {
        this.$refs.otherForm.reset();
        this.formData = { 'type': 'D', 'circulate_mark': 'N', 'house_property_id': this.houseDef };
        this.formHeader = this.houseName + ' - 新增其他收支';
        this.dialogVisible = true;
      },
      handleSave() {
        this.$refs.otherForm.validate().then((valid) => {
          if (valid == true) {
            axiosPost("{:url('save')}", this.formData).then(response => {
              if (response.state == 'success') {
                this.$message.success(response.msg);
                this.dialogVisible = false;
                this.queryTable();
              } else if (response.state == 'warning') {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            });
          }
        });
      },
      handleEdit(row) {
        this.$refs.otherForm.reset();
        this.formData = { ...row };
        this.formHeader = row.property_name + ' - 修改其他收支';
        this.dialogVisible = true;
      },
      handleDelete(row) {
        axiosPost("{:url('delete')}", row).then(response => {
          if (response.state == 'success') {
            this.$message.success(response.msg);
            this.queryTable();
          } else if (response.state == 'warning') {
            this.$message.warning(response.msg);
          } else {
            this.$message.error(response.msg);
          }
        });
      },
      handleAccount(row) {
        axiosPost("{:url('account')}", row).then(response => {
          if (response.state == 'success') {
            this.$message.success(response.msg);
            this.queryTable();
          } else if (response.state == 'warning') {
            this.$message.warning(response.msg);
          } else {
            this.$message.error(response.msg);
          }
        });
      },
      // 切换抄表日期查询
      changeType(val) {
        this.type = val;
        this.queryTable();
      },
    }
  }
</script>
{/block}